<template>
  <section>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane name="event">
        <span slot="label"><i class="iconfont icon-shigongdi"></i> 事件统计</span>
        <div class="content">
          <Event></Event>
        </div>
      </el-tab-pane>
      <el-tab-pane name="road">
        <span slot="label"><i class="iconfont icon-high-road"></i> 路段统计</span>
        <Road></Road>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import Event from './charts/Event'
  import Road from './charts/Road'

  export default {
    name: "Count",
    components: {
      Event,
      Road
    },
    data() {
      return {
        activeName: 'event',
        roadTypes: [],
        roadNames: [],
        options: {
          roadId: '',
          startTime: '',
          endTime: ''
        },
        dataRange: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
      }
    },
    methods: {
      handleClick(tab) {

      }
    }
  }
</script>

<style scoped lang="scss">
  section {
    background-color: #fff;

    /deep/ .el-tabs {
      .el-tabs__header {
        margin: 0 0 5px;
      }

      .el-tabs__item.is-active {
        background-color: var(--font-blue-color);
        color: #fff;
      }
    }

    fieldset {
      margin: 0 20px;
      padding: 0 10px;
      border: 1px solid #aaa;
      background-color: rgba(0, 0, 0, .03);

      legend {
        font-weight: bold;
      }

      > label {
        display: inline-block;
        min-width: 80px;
        padding-right: 10px;
        box-sizing: border-box;
        text-align: right;
      }
    }


    /deep/ .option {
      padding: 0 15px 5px 15px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #E4E7ED;

      .el-form-item {
        margin-bottom: 0;
      }
    }

    /deep/ .cont{
      margin-top: 6px;
    }
  }

</style>
